<template>
    <div class="com-container">
        <!-- 显示title的步骤
            1.创建标题
            2.数据渲染title
         -->
         <div class="title" v-if="ifShow">
             <span @click="isSelect = !isSelect" :style="showTitleFontSize">{{ '▎' + showTitle }}<i :class="showIconfont" :style="showIconFontSize"></i></span>
             <div :style="marginLeftTitle" class="title-com" v-for="item in chooseTitle" :key="item.key" v-show="isSelect" @click="handelChooseItem(item.key)">
                 <div>{{ item.text }}</div>
             </div>
         </div>
        <div class="com-chart" ref="ref_trend"></div>
    </div>
</template>
<script>
export default {
    name:'trend',
    data(){
        return{
            chartInstance:null, //初始化echarts的对象
            allData:null,//服务器请求回来的数据
            currentChoose:'map',//当前选择的类型
            isSelect:false, //判断是否为选中
            titleFontSize:0, //设置字体的大小
        }
    },
    // 组件创建的时候进行，回调函数的注册
    created(){
        this.$socket.registerCallBack('trendData',this.getData);
    },
    mounted(){
        this.initChart();
        // this.getData();
        // 客服端给服务端发送数据
        this.$socket.send({
            action:'getData',
            socketType:'trendData',
            chartName:'trend',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    // 组件销毁
    destroyed(){
        // 移出window.addEventListener('resize',this.updateAdapter);
        window.removeEventListener('resize',this.screenAdapter);
        // 注销回调函数
        this.$socket.unRegisterCallBack('trendData');
    },
    computed:{
        chooseTitle(){
            if(!this.allData){
                return []
            }else{
                // console.log(this.allData)
                return this.allData.type.filter( item => item.key !== this.currentChoose )
            }
        },
        showTitle(){
            if(!this.allData){
                return ''
            }else{
                return this.allData[this.currentChoose].title;
            }
        },
        // 显示iconfont
        showIconfont(){
            if(!this.isSelect){
                return 'iconfont icon-arrow-down'
            }else{
                return 'iconfont icon-arrow-up'
            }
        },
        // 计算标题的字体大小
        showTitleFontSize(){
            return {
                fontSize:this.titleFontSize / 1.2 + 'px'
            }
        },
        // 计算iconfont的字体大小
        showIconFontSize(){
            return {
                paddingLeft:this.titleFontSize + 'px',
                fontSize:this.titleFontSize / 1.2 + 'px'
            }
        },
        marginLeftTitle(){
            return {
                marginLeft:this.titleFontSize / 2 + 'px',
                fontSize:this.titleFontSize / 1.2 + 'px'
            }
        },
        // 判断是否有数据
        ifShow(){
            if(!this.allData){
                return false;
            }else{
                return true;
            }
        }
    },
    methods:{
        // 定义初始化图表的方法initChart()
        initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.ref_trend,'chalk');
            // 拆分option配置项
            const initOption = {
                xAxis:{
                    type:'category',
                     boundaryGap:false
                },
                yAxis:{
                    type:'value'
                },
                // 设置网格的位置
                grid:{
                    top:'20%',
                    left: '3%',
                    right: '5%',
                    bottom:'1%',
                    containLabel:true
                },
                legend:{
                    top:'10%',
                    left:'10%',
                    icon:'circle'
                },
                // tooltip
                tooltip:{
                    trigger:'axis'
                }
            }
            this.chartInstance.setOption(initOption)
        },
        // 定义一个获取服务器方法getData()
        getData(ret){
            // const { data:ret } = await this.$http('trend');
            this.allData = ret;
            // console.log(this.allData)
            // console.log(ret)
            this.updateChart();
        },
        // 更新图表方法updateChart()
        updateChart(){
            // 颜色
            const colorArr1 = [
                'rgba(11,168,44,0.5)',
                'rgba(44,440,255,0.5)',
                'rgba(22,242,217,0.5)',
                'rgba(254,33,30,0.5)',
                'rgba(250,105,0,0.5)'
            ]
            const colorArr2 = [
                'rgba(11,168,44,0)',
                'rgba(44,440,255,0)',
                'rgba(22,242,217,0)',
                'rgba(254,33,30,0)',
                'rgba(250,105,0,0)'
            ]
            // 类目轴的数据
            const timeArr = this.allData.common.month;
            // Y轴的数据
            const valueArr = this.allData[this.currentChoose].data;
            // 图例数据
            const legendArr = valueArr.map( item => item.name);
            const seriesArr = valueArr.map( (item,index) => { 
                return {
                    name:item.name,
                    type:'line',
                    data:item.data,
                    stack:this.currentChoose,
                    areaStyle:{
                        // 指明渐变的方向
                        // 指明不同百分比之下的颜色
                        color:new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                            // 百分之0状态下的颜色值
                            {
                                offset:0,
                                color:colorArr1[index]
                            },
                                // 百分之100状态下的颜色值
                            {
                                offset:1,
                                color:colorArr2[index]
                            }
                        ])
                    }
                } 
            })

            // 数据配置项
            const dataOption = {
                xAxis:{
                    data:timeArr
                },
                legend:{
                    data:legendArr
                },
                series:seriesArr
            }
            this.chartInstance.setOption(dataOption)
        },
        // 实现屏幕适配
        /*
            1.监听窗口的大小的变化
            2.设置适配想数据
            3.调用echarts.resize()方法
        */
       screenAdapter(){
           this.titleFontSize = this.$refs.ref_trend.offsetWidth / 100 * 3.6;
           const adapterOption = {
                legend:{
                    itemGap:this.titleFontSize ,
                    itemWidth:this.titleFontSize ,
                    itemHeight:this.titleFontSize ,
                    textStyle:{
                        fontSize:this.titleFontSize / 2
                    }
                }
           }

            //设置数据
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        //点击分类进行分类的切换
        handelChooseItem(currentType){
            this.currentChoose = currentType;
            this.updateChart();
            this.isSelect = false;
        }
    }
}
</script>
<style lang="less" scoped>
.title{
    position: absolute;
    color: #fff;
    z-index: 10;
    top: 10px;
    left: 50px;
    cursor: pointer;
}
</style>